<template>
  <view class="three-draw">
    <view class="card-item-top">
      <view class="card-item" style="width: 283rpx; height: 336rpx">
        <view
          class="card-front"
          style="width: 283rpx; height: 336rpx"
          :class="{
            'orange-bg': haveDraw[0].rule_id == 1,
            'pink-bg': haveDraw[0].rule_id == 2,
            'blue-bg': haveDraw[0].rule_id == 3,
            'white-bg': haveDraw[0].rule_id == 4,
            'second-rotate-content': secondShow,
          }"
        >
        </view>
        <view class="card-bg" :class="{ 'second-rotate-bg': secondShow }">
        </view>
        <image
          class="card-content"
          :class="{ 'second-rotate-content': secondShow }"
          :src="haveDraw[0].img"
          style="height: 230rpx"
          mode="heightFix"
        ></image>
        <view
          v-if="
            haveDraw[0].rule_id == 1 ||
            haveDraw[0].rule_id == 2 ||
            haveDraw[0].rule_id == 3
          "
          class="left-top"
          :class="{
            'chuan-shuo': haveDraw[0].rule_id == 1,
            'xi-you': haveDraw[0].rule_id == 2,
            normal: haveDraw[0].rule_id == 3,
            'second-top-display': secondShow,
          }"
        >
        </view>
      </view>
    </view>
    <view class="card-item-bottom">
      <view
        class="card-item"
        style="width: 283rpx; height: 336rpx; margin-right: 50rpx"
      >
        <view
          class="card-front"
          style="width: 283rpx; height: 336rpx"
          :class="{
            'orange-bg': haveDraw[1].rule_id == 1,
            'pink-bg': haveDraw[1].rule_id == 2,
            'blue-bg': haveDraw[1].rule_id == 3,
            'white-bg': haveDraw[1].rule_id == 4,
            'second-rotate-content': secondShow,
          }"
        >
        </view>
        <view class="card-bg" :class="{ 'second-rotate-bg': secondShow }">
        </view>
        <image
          class="card-content"
          :class="{ 'second-rotate-content': secondShow }"
          :src="haveDraw[1].img"
          style="height: 230rpx"
          mode="heightFix"
        ></image>
        <view
          v-if="
            haveDraw[1].rule_id == 1 ||
            haveDraw[1].rule_id == 2 ||
            haveDraw[1].rule_id == 3
          "
          class="left-top"
          :class="{
            'chuan-shuo': haveDraw[1].rule_id == 1,
            'xi-you': haveDraw[1].rule_id == 2,
            normal: haveDraw[1].rule_id == 3,
            'second-top-display': secondShow,
          }"
        >
        </view>
      </view>
      <view class="card-item" style="width: 283rpx; height: 336rpx">
        <view
          class="card-front"
          style="width: 283rpx; height: 336rpx"
          :class="{
            'orange-bg': haveDraw[2].rule_id == 1,
            'pink-bg': haveDraw[2].rule_id == 2,
            'blue-bg': haveDraw[2].rule_id == 3,
            'white-bg': haveDraw[2].rule_id == 4,
            'second-rotate-content': secondShow,
          }"
        >
        </view>
        <view class="card-bg" :class="{ 'second-rotate-bg': secondShow }">
        </view>
        <image
          class="card-content"
          :class="{ 'second-rotate-content': secondShow }"
          :src="haveDraw[2].img"
          style="height: 230rpx"
          mode="heightFix"
        ></image>
        <view
          v-if="
            haveDraw[2].rule_id == 1 ||
            haveDraw[2].rule_id == 2 ||
            haveDraw[2].rule_id == 3
          "
          class="left-top"
          :class="{
            'chuan-shuo': haveDraw[2].rule_id == 1,
            'xi-you': haveDraw[2].rule_id == 2,
            normal: haveDraw[2].rule_id == 3,
            'second-top-display': secondShow,
          }"
        >
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      haveDraw: {
        type: String,
        default: 'chart',
      },
      secondShow: {
        type: Boolean,
        default: false,
      },
    },
    watch: {
      haveDraw(newValue, preValue) {},
      secondShow(newValue, preValue) {},
    },
    data() {
      return {}
    },
    onLaunch: function () {
      console.log('App Launch')
    },
    onShow: function () {
      console.log('App Show')
    },
    onHide: function () {
      console.log('App Hide')
    },
  }
</script>
<style lang="scss">
  .three-draw {
    // position: relative;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    margin-top: 81rpx;
    .card-item-top {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 44rpx;
    }
    .card-item-bottom {
      display: flex;
      align-items: center;
    }
    .card-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      .card-front {
        position: absolute;
        top: 0;
        left: 0;
        width: 283rpx;
        height: 336rpx;
        z-index: 1;
        backface-visibility: hidden;
        // animation: rotateOnce 2s ease-out forwards;
      }
      .card-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 283rpx;
        height: 336rpx;
        // z-index: -1;
        background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/card-bg3.png')
          no-repeat;
        background-size: contain;
        // backface-visibility: hidden;
        // animation: rotateBg 2s ease-out forwards;
      }
      .card-content {
        position: absolute;
        // top: 0;
        // left: 0;
        z-index: 2;
        backface-visibility: hidden;
        // animation: rotateOnce 2s ease-out forwards;
      }
      .left-top {
        // display: none;
        opacity: 0;
        position: absolute;
        top: -49rpx;
        left: -45rpx;
        z-index: 3;
        width: 150rpx;
        height: 150rpx;
        // animation: displayTop 2s ease-out forwards 2s;
      }
    }
  }
  // 卡片背景
  .orange-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/orange-bg2.png')
      no-repeat;
    background-size: cover;
  }
  .pink-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/pink-bg2.png')
      no-repeat;
    background-size: cover;
  }
  .blue-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/blue-bg2.png')
      no-repeat;
    background-size: cover;
  }
  .white-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/white-bg2.png')
      no-repeat;
    background-size: cover;
  }
  // 卡牌左上角
  .top-left-purple {
    background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/icon_b.png')
      no-repeat;
    background-size: contain;
  }
  .top-left-pink {
    background: url('https://ojqn.wm2177.com/wechat_imgs/txzr/icon_a.png')
      no-repeat;
    background-size: contain;
  }
  // 传说
  .chuan-shuo {
    // background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/SSR.png')no-repeat;
    background-size: contain;
  }
  // 稀有
  .xi-you {
    // background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/SR.png')no-repeat;
    background-size: contain;
  }
  // 普通
  .normal {
    // background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/R.png')no-repeat;
    background-size: contain;
  }
  //重复动画
  .second-rotate-content {
    animation: rotateOnce 0.8s ease-out forwards;
  }
  .second-rotate-bg {
    animation: rotateBg 0.8s ease-out forwards;
  }
  .second-top-display {
    animation: displayTop 0.8s ease-out forwards 1.5s;
  }
  /* 定义旋转动画 */
  @keyframes rotateOnce {
    0% {
      transform: rotateY(0deg);
    }
    25% {
      transform: rotateY(90deg);
    }
    50% {
      transform: rotateY(180deg);
    }
    75% {
      transform: rotateY(270deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
  @keyframes rotateBg {
    0% {
      transform: rotateY(0deg);
    }
    25% {
      transform: rotateY(90deg);
    }
    50% {
      transform: rotateY(180deg);
    }
    75% {
      transform: rotateY(270deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
  @keyframes scroll-left {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0%);
    }
  }
</style>
